import { useState, useReducer } from "react";


// 定义修改方法
// state 就是默认值 state 
// action 中有两个东西，一个是 type 用来标记要做什么，payload 是要修改的值
function reducer(state, action) {
    switch (action.type) {
        case 'change-x':
            return { ...state, x: action.payload }
        case 'change-y':
            return { ...state, y: action.payload }

        default:
            return state
    }
}
// 定义初始数据
const initState = {
    x: 0,
    y: 0,
    w: 100,
    h: 100
}

function App() {

    // useReducer 和 useState 都是用来给函数组件定义响应式数据用的
    // 当数据比较简单纯粹的时候，也就是基本类型数据定义的时候建议使用 useState
    // 如果数据量比较庞大，是对象或多个对象或二维数组等，建议使用 useReducer

    // 创建一个 state 和修改数据的触发方法 dispatch
    const [state, dispatch] = useReducer(reducer, initState)


    // 鼠标移动的回调函数
    function mouseMove(evnet) {
        console.log(evnet.clientX, evnet.clientY);
        dispatch({
            type: 'change-x',
            payload: evnet.clientX
        })

        dispatch({
            type: 'change-y',
            payload: evnet.clientY
        })

    }


    return <div onMouseMove={mouseMove} style={{ width: '100vw', height: '100vh', backgroundColor: '#f66' }}>
        <h1>
            x: {state.x} ---- y: {state.y},
            w: {state.w} ---- h: {state.h}
        </h1>
    </div>
}


export default App